<template>
    <div>
        <navbar title="编辑资料" @onClickLeft="onClickLeft"></navbar>
        <div class="bj-class"></div>
        <div class="content-class">
            <div>
                <div @click="isBuddhaShow = true">
                    <div>头像</div>
                    <div>
                        <van-image round width="60" height="60" :src="form.headPortrait" />
                    </div>
                </div>
                <div>
                    <div>姓名</div>
                    <div>
                        <van-form validate-first @submit="submit" ref="form">
                            <van-field :border="false" v-model="form.name" name="nickname" placeholder="请输入昵称"
                                :rules="rules.nickname">
                            </van-field>
                        </van-form>
                        <!-- <van-field v-model="form.name" /> -->
                    </div>
                </div>
                <div >
                    <div>性别</div>
                    <div>
                        <span>{{ form.gender == 1 ? '男' : '女' }}</span><van-icon name="arrow" />
                    </div>
                </div>
                <div @click="isBirthday = true">
                    <div>生日</div>
                    <div>
                        <span>{{ form.birthday }}</span><van-icon name="arrow" />
                    </div>
                </div>
                <div @click="xitPopupDate(1)">
                    <div>星座</div>
                    <div>
                        <span>{{ form.constellation }}</span><van-icon name="arrow" />
                    </div>
                </div>
                <div @click="xitPopupDate(2)">
                    <div>职业</div>
                    <div>
                        <span>{{ form.occupation.occupation_name }}</span><van-icon name="arrow" />
                    </div>
                </div>
                <div @click="xitPopupDate(3)">
                    <div>身高</div>
                    <div>
                        <span>{{ form.stature }}cm</span><van-icon name="arrow" />
                    </div>
                </div>
                <div @click="xitPopupDate(4)">
                    <div>体重</div>
                    <div>
                        <span>{{ form.weight }}kg</span><van-icon name="arrow" />
                    </div>
                </div>
                <div @click="isInterest = true">
                    <div>兴趣爱好</div>
                    <div>
                        <div class="xqah-class" v-for="item, index in form.Interest" :key="index">
                            {{ item.label_name }}
                        </div>
                        <van-icon name="arrow" />
                    </div>
                </div>
            </div>
            <div class="bottom-bnt">
                <van-button @click="onConfirmModification" round block type="info" native-type="submit"
                    color="linear-gradient(180deg, #3764EC 0%, #6B85F7 100%)">确认修改</van-button>
            </div>
        </div>
        <!-- 选择生日 -->
        <van-popup v-model="isBirthday" @cancel="isBirthday = false" round position="bottom">
            <van-datetime-picker @cancel="isBirthday = false" :min-date="new Date(1979, 0, 1)" :maxDate='new Date()'
                type="date" title="选择生日" :columns-order="['year', 'month', 'day']" :formatter="formatter"
                @confirm="onConfirm" />
        </van-popup>
        <!-- 性别、星座、职业、身高、体重通用选择 -->
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker v-if="elseName == 2" :title="pickerTitle" value-key="occupation_name" show-toolbar
                :columns="columns" @cancel="showPicker = false" @confirm="qinTonConfirm" />
            <van-picker v-else :title="pickerTitle" show-toolbar :columns="columns" @cancel="showPicker = false"
                @confirm="qinTonConfirm" />
        </van-popup>
        <!-- 选择头像 -->
        <van-popup v-model="isBuddhaShow" @cancel="isBuddhaShow = false" round position="bottom">
            <div class="BuddhaShow-class">
                <div>
                    <div>请上传本人高清正面靓照</div>
                    <div>五官清晰的照片，会更受欢迎哦～</div>
                    <div>
                        <van-image width="140" height="140" :src="require('../../assets/iconPersonalData/77@2x.png')" />
                        <van-image class="gqzl-class" width="56" height="18"
                            :src="require('../../assets/iconPersonalData/98@2x.png')" />
                        <van-image class="yzdt-class" width="56" height="18"
                            :src="require('../../assets/iconPersonalData/100@2x.png')" />
                        <van-image class="gxml-class" width="56" height="18"
                            :src="require('../../assets/iconPersonalData/99@2x.png')" />
                    </div>
                </div>
                <div>
                    <span>—— 不能通过的头像——</span>
                </div>
                <div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/79@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />

                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/80@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />
                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/81@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />
                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                    <div>
                        <div>
                            <van-image width="75" height="75" :src="require('../../assets/iconPersonalData/82@2x.png')" />
                            <van-image class="jz-class" width="24" height="24"
                                :src="require('../../assets/iconPersonalData/failed@2x.png')" />
                        </div>
                        <div>
                            <span>不露正脸</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="bottom-bnt scwdzp-class">
                        <van-uploader :before-read="beforeRead">
                            <van-button type="primary" round block
                                color="linear-gradient(180deg, #3764EC 0%, #6B85F7 100%)">上传我的照片</van-button>
                        </van-uploader>
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- 兴趣爱好选择 -->
        <van-popup v-model="isInterest" @cancel="isInterest = false" round position="bottom">
            <div class="interest-class">
                <div>
                    <div @click="isInterest = false">取消</div>
                    <div>
                        <div>兴趣爱好</div>
                        <div>(3/{{ form.Interest.length }})</div>
                    </div>
                    <div @click="onDefiniteSelection">确定</div>
                </div>
                <div>
                    <div v-for="(item, index) in interestArr" @click="onselectInterest(item)" :key="index">
                        <van-image width="20" height="20"
                            :src="item.isTr ? require('../../assets/iconPersonalData/checkbox-checked@2x.png') : require('../../assets/iconPersonalData/checkbox@2x.png')" />
                        <van-image width="32" height="32" :src="item.isTr ? item.label_no_icon : item.label_icon" />
                        <div>{{ item.label_name }}</div>
                    </div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="isShow" @cancel="isShow = false" round position="bottom">
            <profilePictureUpload v-if="isShow" :file="file" @beforeReadx="beforeRead" @uploadImgSuccess="uploadImgSuccess"
                @onclose="onclose">
            </profilePictureUpload>
        </van-popup>
    </div>
</template>

<script>
// import {checkMobile} from "@/utils/fun"
import navbar from "@/components/navbar.vue"
import profilePictureUpload from "@/components/profilePictureUpload.vue"
import { useredit, getMyInfo } from '@/api/index'
export default {
    name: "Login",
    components: {
        navbar,
        profilePictureUpload
    },
    data() {
        return {
            interestArr: [],
            isInterest: false, //兴趣的底部弹出控制
            isShow: false,
            isBuddhaShow: false,
            elseName: 0,
            pickerTitle: '', //其他选择标题
            isBirthday: false,
            isConstellation: false,
            isOccupation: false,
            isStature: false,
            isWeight: false,
            isForm: true,
            form: {
                headPortrait: '', //头像
                name: '', //姓名
                gender: '', //性别
                birthday: '', //生日
                constellation: '', //星座
                occupation: {}, //职业
                stature: '', //身高
                weight: '',//体重
                Interest: [], //兴趣爱好
            },
            rules: {
                nickname: [
                    {
                        pattern: /^[\u4e00-\u9fa5\w]{3,10}$/,
                        message: "请输入3~10的昵称长度",
                        trigger: "onBlur",
                    },
                ],
                birthday: [
                    {
                        message: "请选择你的生日",
                        trigger: "onBlur",
                    },
                ],
                city: [
                    {
                        message: "请选择你的城市",
                        trigger: "onBlur",
                    },
                ],
                constellation: [
                    {
                        message: "请选择你的星座",
                        trigger: "onBlur",
                    },
                ],
                occupation: [
                    {
                        message: "请选择你的职业",
                        trigger: "onBlur",
                    },
                ],
                stature: [
                    {
                        message: "请选择你的身高",
                        trigger: "onBlur",
                    },
                ],
                weight: [
                    {
                        message: "请选择你的体重",
                        trigger: "onBlur",
                    },
                ]
            },
            countdown: true, //验证码的状态，默认显示发送验证码
            count: "", //60秒倒计时
            timer: null,
            text: "获取定位",
            columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
            showPicker: false,
            file: '', //上传的头像
            isfield: true
        };
    },
    watch: {
        form: {
            handler(newVal, oldVal) {
                if (Object.values(this.form).some(v => v === '')) {
                    this.isForm = true;
                } else {
                    this.isForm = false;
                }
            },
            // immediate: true,
            deep: true // 可以深度检测到 person 对象的属性值的变化
        }
    },
    async mounted() {
        await this.$store.dispatch("siteConfig/setting")

        let interestArr = this.$store.getters['siteConfig/interest_label']
        for (let index = 0; index < interestArr.length; index++) {
            interestArr[index]['isTr'] = false;
        }

        let occupationList = this.$store.getters['siteConfig/occupation_data']

        console.log(occupationList);


        let userInfo = this.$store.state.userInfo;

        let occupation = occupationList.filter((item) => item.occupation_name === userInfo.occupation)[0];

        occupation = {
            id: 7,
            occupation_name: "自由职业"
        };

        let interest_label = []

        for (let index = 0; index < userInfo.interest_label.length; index++) {
            const element = userInfo.interest_label[index];
            interest_label.push(interestArr.filter((item) => item.label_name === element)[0])

            for (let index = 0; index < interestArr.length; index++) {
                if (interestArr[index].label_name == element) {
                    interestArr[index].isTr = true;
                }
            }
        }


        this.form = {
            headPortrait: userInfo.avatar, //头像
            name: userInfo.nickname, //姓名
            gender: userInfo.sex, //性别
            birthday: userInfo.birthday, //生日
            constellation: userInfo.constellation, //星座
            occupation: occupation, //职业
            stature: userInfo.height, //身高
            weight: userInfo.weight,//体重
            Interest: interest_label, //兴趣爱好
        }
        this.interestArr = interestArr
    },
    methods: {
        onClickLeft() {
            this.$router.push({ path: '/my' })
            // console.log("关闭");
        },
        //验证通过
        submit(value) {
            console.log(value);
        },
        //清空
        empty() {
            this.form.tel = ''
        },
        //性别按钮点击
        // ongender(value) {
        //     console.log(value);
        //     this.form.gender = value;
        // },
        //获取定位
        getCode() {
            this.$router.push({ path: '/location' })
            // const TIME_COUNT = 60;
            // if (!this.timer) {
            //     this.count = TIME_COUNT;
            //     this.countdown = false;
            //     this.text = "重新获取";
            //     this.timer = setInterval(() => {
            //         if (this.count > 0 && this.count <= TIME_COUNT) {
            //             this.count--;
            //         } else {
            //             this.countdown = true;
            //             //发送验证码

            //             clearInterval(this.timer);
            //             this.timer = null;
            //         }
            //     }, 1000);
            // }
        },
        //弹出日期选择框
        popupDate() {
            this.isBirthday = true;
        },
        //选择生日
        onConfirm(data) {
            console.log(data);
            this.isBirthday = false;
            this.form.birthday = this.formatDate(data)
        },
        //格式化日期
        formatDate(date) {
            return `${date.getFullYear()}-${(date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)}-${date.getDate() < 10 ? '0' + date.getDate() : date.getDate()}`;
        },
        //其他选择的点击事件
        /*      
            1:星座
            2:职业
            3:身高
            4:体重
        */
        xitPopupDate(value) {
            console.log(value);
            if (value == 1) {
                this.pickerTitle = '选择星座'
                this.columns = [
                    "白羊座",
                    "金牛座",
                    "双子座",
                    "巨蟹座",
                    "狮子座",
                    "处女座",
                    "天秤座",
                    "天蝎座",
                    "射手座",
                    "摩羯座",
                    "水瓶座",
                    "双鱼座"
                ];
            } else if (value == 2) {
                this.pickerTitle = '选择职业'
                this.columns = this.$store.getters['siteConfig/occupation_data']
            } else if (value == 3) {
                this.pickerTitle = '选择身高'
                this.columns = []
                for (let i = 150; i <= 200; i++) {
                    this.columns.push(i + 'cm');
                }
            } else if (value == 4) {
                this.pickerTitle = '选择体重'
                this.columns = []
                for (let i = 40; i <= 120; i++) {
                    this.columns.push(i + 'kg');
                }
            } else if (value == 5) {
                this.pickerTitle = '选择性别'
                this.columns = [
                    "男",
                    "女",
                ];
            }
            this.elseName = value;
            this.showPicker = true;
        },
        //其他选择器
        /*
            constellation: '', //星座
            occupation: '', //职业
            stature: '', //身高
            weight: '',//体重
        */
        qinTonConfirm(value) {
            console.log(value);
            if (this.elseName == 1) {
                this.form.constellation = value;
            } else if (this.elseName == 2) {
                this.form.occupation = value;
            } else if (this.elseName == 3) {
                this.form.stature = value.substring(0, value.length - 2);
            } else if (this.elseName == 4) {
                this.form.weight = value.substring(0, value.length - 2);
            } else if (this.elseName == 5) {
                this.form.gender = value == '男' ? 1 : 2;
            }
            this.value = value;
            this.showPicker = false;
        },
        //上传照片
        onUploadPictures() {
            this.isBuddhaShow = true;
        },
        // 上传头像
        beforeRead(file) {
            this.isShow = false;
            if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
                this.$toast('请上传 jpg、png 格式图片');
                return false;
            }
            this.$nextTick(() => {
                this.file = file;
                this.isShow = true;
            })
            return true;
        },
        //获取请求成功的头像链接
        uploadImgSuccess(value) {
            this.form.headPortrait = value.url;
            this.isBuddhaShow = false;
            this.isShow = false;
        },
        //关闭
        onclose() {
            this.isShow = false;
        },
        //格式化日期显示
        formatter(type, val) {
            if (type === 'year') {
                return val + '年';
            }
            if (type === 'month') {
                return val + '月';
            }
            if (type === 'day') {
                return val + '日';
            }
            return val;
        },
        //选择兴趣
        onselectInterest(items) {
            console.log(this.form.Interest.indexOf(items.id));
            // if (this.form.Interest.indexOf(items.id) !== -1) {
            if (this.form.Interest.some(item => item.id === items.id)) {
                // let indx = this.form.Interest.indexOf(items.id)
                let indx = this.form.Interest.findIndex(item => item.id === items.id);
                this.form.Interest.splice(indx, 1)
                let index = this.interestArr.findIndex(item => item.id === items.id)
                this.interestArr[index].isTr = false
            } else {
                if (this.form.Interest.length < 3) {
                    let index = this.interestArr.findIndex(item => item.id === items.id)
                    this.interestArr[index].isTr = true
                    this.form.Interest.push(items)
                } else {
                    return
                }
            }
        },
        //确定兴趣
        onDefiniteSelection() {
            if (this.form.Interest.length < 3) {
                this.$toast('请选择至少三个兴趣爱好！！');
            } else {
                this.isInterest = false;
            }
        },
        //确认修改
        onConfirmModification() {
            if (this.form.name) {
                let interest_ids = []
                this.form.Interest.forEach(element => {
                    interest_ids.push(element.id);
                });

                useredit({
                    nickname: this.form.name,
                    avatar: this.form.headPortrait,
                    birthday: this.form.birthday,
                    sex: this.form.gender,
                    constellation: this.form.constellation,
                    weight: this.form.weight,
                    height: this.form.stature,
                    occupation: this.form.occupation.occupation_name,
                    interest_ids: interest_ids
                }).then(res => {
                    this.$toast('编辑资料成功！');
                    this.$router.push({ path: '/my' })
                    getMyInfo().then(res => {
                        this.$store.commit('SET_USERINFO', res.data)
                    })
                })
            }
        },
        onIsfield() {
            this.isfield = false;
        },
    },
};
</script>

<style scoped lang="scss">
::v-deep .navbar {
    position: absolute !important;
    top: 30px !important;
}

::v-deep .van-nav-bar {
    background-color: #ffffff00 !important;
}


::v-deep .van-nav-bar__content {
    background: #ffffff00 !important;
    background-color: #ffffff00 !important;
}

.bj-class {
    width: 100%;
    height: 148px;
    background: linear-gradient(180deg, #CDE1FD 0%, rgba(255, 255, 255, 0) 100%);
}

.top-img-class {
    width: 100px;
    margin: auto;
    height: auto;
    position: relative;

    &>img:nth-child(2) {
        position: absolute;
        right: 0px;
        bottom: 4px;
    }
}

.content-class {
    margin: -70px 20px 0px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &>div:nth-child(1)>div {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>div:nth-child(1) {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #767676;
        }

        &>div:nth-child(2) {
            display: flex;
            align-items: center;

            ::v-deep .van-field__control {
                text-align: right !important;
            }

            ::v-deep .van-cell {
                padding: 0px !important;
            }

            &>span {
                margin-right: 8px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #1A1A1A;
            }

            ::v-deep & .van-icon {
                margin-top: 1px !important;
            }
        }

        padding: 16px 0px;

        border-bottom: 1px solid #D8D8D8;

        & .xqah-class {
            // width: 40px;
            padding: 0px 4px;
            height: 20px;
            background: #FFE5CC;
            border-radius: 8px;
            text-align: center;
            line-height: 20px;
            margin-right: 8px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FF8F1F;
        }
    }
}

// ::v-deep .van-cell {
//     // padding: 15px 0px !important;
//     // background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%) !important;
//     border-radius: 8px !important;
//     background: RGBA(236, 239, 254, 1) !important;
//     border: 1px solid rgba(82, 117, 241, 0.3) !important;

//     &>.van-field__label {
//         border-right: 1px solid #d8d8d8 !important;
//         font-size: 16px !important;
//         font-family: PingFangSC-Regular, PingFang SC;
//         font-weight: 400;
//         color: rgba(118, 118, 118, 1);
//         // padding-left: 30px !important;
//     }

//     &>div:nth-child(2) {
//         & .van-field__button {
//             // margin-right: 15px !important;
//             color: rgba(26, 26, 26, 1) !important;
//             font-size: 16px !important;
//         }
//     }

//     & .van-field__control {
//         font-size: 16px !important;
//         font-family: PingFangSC-Regular, PingFang SC !important;
//         font-weight: 400 !important;
//         color: #767676 !important;
//         line-height: 16px !important;
//     }

//     &::after {
//         display: none !important;
//     }

//     margin-top: 20px !important;
// }

.bottom-bnt {
    margin-top: 40px;
    margin-bottom: 20px;

    ::v-deep .van-button--round {
        border-radius: 8px !important;
    }

    ::v-deep .van-button--normal {
        font-size: 16px !important;
        font-family: PingFangSC-Medium, PingFang SC !important;
        font-weight: 500 !important;
        color: #FFFFFF !important;
    }

    ::v-deep .van-button--disabled {
        background: #D8D8D8 !important;
        border-color: #D8D8D8 !important;

        & .van-button__text {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: RGBA(118, 118, 118, 1) !important;
            line-height: 16px;
        }
    }

}


.input-class {
    margin-top: 20px;

    &>div:nth-child(1) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1A1A1A;
        margin-bottom: 10px;
    }
}

.input-dxk-class {

    ::v-deep .van-button--round {
        border-radius: 8px !important;
    }

    ::v-deep .van-button__text {
        margin-top: 6px !important;
    }

    ::v-deep .van-button--normal {
        font-size: 16px !important;
        font-family: PingFangSC-Medium, PingFang SC !important;
        font-weight: 500 !important;
        color: #FFFFFF !important;
    }

    &>div:nth-child(2) {
        display: flex;
        gap: 10px;

        ::v-deep & .van-button--block {
            height: 60px !important;
        }

        .mr-class {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #767676;
        }

        .nan-class,
        .nv-class {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
}

.tis-class {
    margin-top: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #767676;
}

.input-bd-class {
    margin-top: 10px;

    &>div:nth-child(1) {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1A1A1A;
        margin-bottom: -12px;
    }
}

.qit-class {
    &>div {
        display: flex;
        gap: 10px;
    }
}

::v-deep .van-field__right-icon {
    line-height: 50% !important;
}

.BuddhaShow-class {
    padding: 33px 16px 0px 16px;

    &>div:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        &>div:nth-child(1) {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: RGBA(26, 26, 26, 1);
        }

        &>div:nth-child(2) {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #767676;
            margin: 11px 0px 24px 0px;
        }

        &>div:nth-child(3) {
            position: relative;

            & .gqzl-class {
                position: absolute;
                top: 18px;
                left: -21px;
            }

            & .yzdt-class {
                position: absolute;
                bottom: 7px;
                left: 0px;
            }

            & .gxml-class {
                position: absolute;
                top: 52px;
                right: -28px;
            }
        }
    }

    &>div:nth-child(2) {
        text-align: center;
        margin: 42px 0px 24px 0px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #767676;
    }

    &>div:nth-child(3) {
        display: flex;
        justify-content: space-between;

        &>div {
            position: relative;
            text-align: center;

            & .jz-class {
                position: absolute;
                top: 0px;
                right: 0px;
            }

            &>div:nth-child(2) {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #767676;
                margin-top: 16px;
            }
        }
    }

    &>div:nth-child(4) {
        & .scwdzp-class {
            margin-top: 33px;
            margin-bottom: 20px;

            ::v-deep .van-button--round {
                border-radius: 8px !important;
            }

            ::v-deep .van-button--normal {
                font-size: 16px !important;
                font-family: PingFangSC-Medium, PingFang SC !important;
                font-weight: 500 !important;
                color: #FFFFFF !important;
            }

            ::v-deep .van-button--disabled {
                background: #D8D8D8 !important;
                border-color: #D8D8D8 !important;

                & .van-button__text {
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: RGBA(118, 118, 118, 1) !important;
                    line-height: 16px;
                }
            }

            ::v-deep .van-button {
                height: 48px !important;
            }

            ::v-deep .van-uploader {
                display: block !important;

                & .van-uploader__wrapper {
                    display: block !important;
                }
            }
        }
    }
}

.interest-class {
    &>div:nth-child(1) {
        padding: 24px 15px 0px 15px;
        display: flex;
        justify-content: space-between;

        &>div:nth-child(1) {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #767676;
        }

        &>div:nth-child(2) {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1A1A1A;
            text-align: center;
        }

        &>div:nth-child(3) {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #000000;
            background-image: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
            -webkit-background-clip: text;
            color: transparent;
        }
    }

    &>div:nth-child(2) {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 11px;
        padding: 9px 9px 57px 9px;


        &>div {
            background: #F7F7F7;
            border-radius: 8px;
            // margin-right: 20px;
            margin-bottom: 6px;
            width: calc((100% - 30px) / 3);
            height: 130px;
            border-radius: 8px;
            border: 1px solid #D8D8D8;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            &>div:nth-child(1) {
                margin-top: 10px;
            }

            &>div:nth-child(3) {
                margin-bottom: 22px;
            }
        }
    }
}

::v-deep .van-field__error-message {
    text-align: right !important;
}
</style>
